<template>
  <div class="wrapper">
    <swiper :options="swiperOption" v-if="showSwiper">
      <!-- https://www.jianshu.com/p/c4925ef55eaa?utm_source=oschina-app 该组件详细笔记 -->

       <!-- slides -->


       <swiper-slide v-for="item of list" :key="item.id">
         <img class="swiper-img" :src="item.imgUrl" alt="去哪儿门票">
       </swiper-slide>


      <!--
      <swiper-slide>
        <img class="swiper-img" src="../../../assets/images/a.jpg">
      </swiper-slide>

      <swiper-slide>
        <img class="swiper-img" src="../../../assets/images/c.jpg">
      </swiper-slide>
      -->




       <!-- Optional controls -->
       <div class="swiper-pagination"  slot="pagination"></div>

     </swiper>
     <!-- 注意swiper的:options 需要在子组件定义对应的data -->
  </div>
</template>

<script>
  export default {
    name:'HomeSwiper',
    // https://blog.csdn.net/kassiaaaa/article/details/94636794 vue-awesome-swiper 的 坑
    // data {
    //   return {
         //ES6写法
    //   }
    // }
    props:{
      list : Array
    },
    computed:{
      showSwiper (){
        return this.list.length
      }
    },
    data () {
      return {
        swiperOption : {
          pagination : '.swiper-pagination',
          loop : 'true',
          autoplay : 2000,
          speed : 1000
        }
      //   swiperList:[
      //                   {
      //                       id:'001',
      //                       imgUrl:"http://img1.qunarzz.com/piao/fusion/1805/d4/d41d77b6ba8aca02.jpg_750x200_ac3d9a73.jpg"
      //                   },
      //                   {
      //                       id:'002',
      //                       imgUrl:"http://img1.qunarzz.com/piao/fusion/1805/f1/e57bc93226317102.jpg_750x200_9ab37bd0.jpg"
      //                   },
      //                   {
      //                       id:'003',
      //                       imgUrl:"http://img1.qunarzz.com/piao/fusion/1804/c4/1cdd28811593b802.jpg_750x200_5fbb7c91.jpg"
      //                   }
      //               ]
      }
    }
  }
</script>

<style lang="stylus" scoped>
  //这样>>>实现样式穿透 让swiper-pagination-bullet 不受scoped的影响
  .wrapper >>> .swiper-pagination-bullet
    background : #fff !important
  .wrapper
    overflow hidden // !
    width 100%
    height 0
    padding-bottom 30% // !图片高：宽
    background #EEEEEE
    .swiper-img
      width 100%
</style>
